import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { useUserStore } from '../stores/user.js'
import { adminRoutes } from '../views/admin/adminRoutes.js'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
    {
      path: '/life',
      name: 'life',
      component: () => import('../views/lifeCircle.vue'),
    },
    {
      path: '/life2',
      name: 'life2',
      component: () => import('../views/lifeCircle2.vue'),
    },
    {
      path: '/life3',
      name: 'life3',
      component: () => import('../views/lifeCircle3.vue'),
    },
    {
      path: '/haha',
      name: 'haha',
      component: () => import('../views/haha.vue'),
    },
    {
      path: '/beforeMount',
      name: 'beforeMount',
      component: () => import('../views/onBeforeMountView.vue'),
    },
    {
      path: '/mounted',
      name: 'mounted',
      component: () => import('../views/onMountedView.vue'),
    },
    {
      path: '/beforeUpdate',
      name: 'beforeUpdate',
      component: () => import('../views/onBeforeUpdateView.vue'),
    },
    {
      path: '/updated',
      name: 'updated',
      component: () => import('../views/onUpdatedView.vue'),
    },
    {
      path: '/beforeUnmount',
      name: 'beforeUnmount',
      component: () => import('../views/onBeforeUnmountView.vue'),
    },
    {
      path: '/unmounted',
      name: 'unmounted',
      component: () => import('../views/onUnmountedView.vue'),
    },
    {
      path: '/fu',
      name: 'fuvue',
      component: () => import('../views/direactives/fu.vue'),
    },
    {
      path: '/zi',
      name: 'zivue',
      component: () => import('../views/direactives/zi.vue'),
    },
    {
      path: '/perf',
      name: 'perfvue',
      component: () => import('../views/direactives/perf.vue'),
    },
    {
      path: '/selfdef',
      name: 'selfdef',
      component: () => import('../views/direactives/selfdefdirective.vue'),
    },
    {
      path: '/composition-vs-options',
      name: 'composition-vs-options',
      component: () => import('../views/CompositionVsOptions.vue'),
    },
    {
      path: '/person',
      name: 'person',
      component: () => import('../views/person.vue'),
    },
    {
      path: '/personnn',
      name: 'personnn',
      component: () => import('../views/personnn.vue'),
    },
    {
      path: '/ttf1',
      name: 'ttf1',
      component: () => import('../views/ttf_1/index.vue'),
    },
    {
      path: '/ttf2',
      name: 'ttf2',
      component: () => import('../views/ttf_2/index.vue'),
    },
    {
      path: '/ttf3',
      name: 'ttf3',
      component: () => import('../views/ttf_3/index.vue'),
    },
    {
      path: '/ttf4',
      name: 'ttf4',
      component: () => import('../views/ttf_4/index.vue'),
    },
    {
      path: '/ttf5',
      name: 'ttf5',
      component: () => import('../views/ttf_5/index.vue'),
    },
    {
      path: '/ttf6',
      name: 'ttf6',
      component: () => import('../views/ttf_6/index.vue'),
    },
    {
      path: '/ttf7',
      name: 'ttf7',
      component: () => import('../views/ttf_7/index.vue'),
    },
    {
      path: '/ttf8',
      name: 'ttf8',
      component: () => import('../views/ttf_8/index.vue'),
    },
    {
      path: '/ttf9',
      name: 'ttf9',
      component: () => import('../views/ttf_9/index.vue'),
    },
    {
      path: '/ttf10',
      name: 'ttf10',
      component: () => import('../views/ttf_10/index.vue'),
    },
    {
      path: '/ttf11',
      name: 'ttf11',
      component: () => import('../views/ttf_11/index.vue'),
    },
    {
      path: '/ttf12',
      name: 'ttf12',
      component: () => import('../views/ttf_12/index.vue'),
    },
    {
      path: '/ttf13',
      name: 'ttf13',
      component: () => import('../views/ttf_13/index.vue'),
    },
    {
      path: '/ttf14',
      name: 'ttf14',
      component: () => import('../views/ttf_14/index.vue'),
    },
    {
      path: '/ttf15',
      name: 'ttf15',
      component: () => import('../views/ttf_15/index.vue'),
    },
    {
      path: '/ttf16',
      name: 'ttf16',
      component: () => import('../views/ttf_16/index.vue'),
    },
    {
      path: '/ttf17',
      name: 'ttf17',
      component: () => import('../views/ttf_17/index.vue'),
    },
    {
      path: '/ttf18',
      name: 'ttf18',
      component: () => import('../views/ttf_18/index.vue'),
    },
    {
      path: '/ttf19',
      name: 'ttf19',
      component: () => import('../views/ttf_19/index.vue'),
    },
    {
      path: '/ttf20',
      name: 'ttf20',
      component: () => import('../views/ttf_20/index.vue'),
    },
    {
      path: '/ttf21',
      name: 'ttf21',
      component: () => import('../views/ttf_21/index.vue'),
    },
    {
      path: '/ttf22',
      name: 'ttf22',
      component: () => import('../views/ttf_22/index.vue'),
    },
    {
      path: '/ttf23',
      name: 'ttf23',
      component: () => import('../views/ttf_23/index.vue'),
    },
    {
      path: '/ttf24',
      name: 'ttf24',
      component: () => import('../views/ttf_24/index.vue'),
    },
    {
      path: '/ttf25',
      name: 'ttf25',
      component: () => import('../views/ttf_25/index.vue'),
    },  
    {
      path: '/ttf26',
      name: 'ttf26',
      component: () => import('../views/ttf_26/index.vue'),
    },
    {
      path: '/ttf27',
      name: 'ttf27',
      component: () => import('../views/ttf_27/index.vue'),
    },
    {
      path: '/ttf28',
      name: 'ttf28',
      component: () => import('../views/ttf_28/index.vue'),
    },
    {
      path: '/ttf29',
      name: 'ttf29',
      component: () => import('../views/ttf_29/index.vue'),
    },  
    {
      path: '/ttf30',
      name: 'ttf30',
      component: () => import('../views/ttf_30/index.vue'),
    },
    {
      path: '/xiangying',
      name: 'xiangying',
      component: () => import('../views/xiangying.vue'),
    },
    {
      path: '/courses',
      name: 'courses',
      component: () => import('../views/CourseNavigation.vue'),
    },
    // 组件学习路由
    {
      path: '/component-learning',
      name: 'component-learning',
      component: () => import('../views/ComponentLearning.vue'),
    },
    {
      path: '/component-basics',
      name: 'component-basics',
      component: () => import('../views/zujian/ComponentBasics.vue'),
    },
    {
      path: '/component-communication',
      name: 'component-communication',
      component: () => import('../views/zujian/ComponentCommunication.vue'),
    },
    {
      path: '/component-slots',
      name: 'component-slots',
      component: () => import('../views/zujian/ComponentSlots.vue'),
    },
    {
      path: '/component-switching',
      name: 'component-switching',
      component: () => import('../views/zujian/ComponentSwitching.vue'),
    },
    {
      path: '/builtin-components',
      name: 'builtin-components',
      component: () => import('../views/zujian/BuiltinComponents.vue'),
    },
    // 组合式 API 学习
    {
      path: '/zuheapi/options',
      name: 'zuheapi-options',
      component: () => import('../views/zuheapi/XuanXiangView.vue'),
    },
    {
      path: '/zuheapi/composition',
      name: 'zuheapi-composition',
      component: () => import('../views/zuheapi/ZuHeShiView.vue'),
    },
    {
      path: '/mixins',
      name: 'mixins-course',
      component: () => import('../views/zujian/MixinsCourse.vue'),
    },
    // 组合式 API 进阶
    {
      path: '/zuheapi/reactive',
      name: 'zuheapi-reactive',
      component: () => import('../views/zuheapi/ReactiveApiView.vue'),
    },
    {
      path: '/zuheapi/setup',
      name: 'zuheapi-setup',
      component: () => import('../views/zuheapi/SetupFunctionView.vue'),
    },
    {
      path: '/zuheapi/setup-props-context',
      name: 'zuheapi-setup-props-context',
      component: () => import('../views/zuheapi/SetupPropsContextView.vue'),
    },
    // 路由与过渡动画教程
    {
      path: '/luyou/static',
      name: 'luyou-static',
      component: () => import('../components/luyou/StaticRoutesTutorial.vue'),
    },
    {
      path: '/luyou/dynamic',
      name: 'luyou-dynamic',
      component: () => import('../components/luyou/DynamicRoutesTutorial.vue'),
    },
    {
      path: '/luyou/params',
      name: 'luyou-params',
      component: () => import('../components/luyou/RouteParamsTutorial.vue'),
    },
    {
      path: '/luyou/guard-global',
      name: 'luyou-guard-global',
      component: () => import('../components/luyou/GlobalBeforeGuardTutorial.vue'),
    },
    {
      path: '/luyou/guard-per-route',
      name: 'luyou-guard-per-route',
      component: () => import('../components/luyou/PerRouteGuardTutorial.vue'),
    },
    {
      path: '/luyou/guard-in-component',
      name: 'luyou-guard-in-component',
      component: () => import('../components/luyou/InComponentGuardTutorial.vue'),
    },
    {
      path: '/luyou/transition-gradient',
      name: 'luyou-transition-gradient',
      component: () => import('../components/luyou/GradientTransitionTutorial.vue'),
    },
    {
      path: '/luyou/transition-slide',
      name: 'luyou-transition-slide',
      component: () => import('../components/luyou/SlideTransitionTutorial.vue'),
    },
    {
      path: '/luyou/transition-zoom',
      name: 'luyou-transition-zoom',
      component: () => import('../components/luyou/ZoomTransitionTutorial.vue'),
    },
    {
      path: '/luyou/transition-rotate',
      name: 'luyou-transition-rotate',
      component: () => import('../components/luyou/RotateTransitionTutorial.vue'),
    },
    {
      path: '/luyou/transition-custom',
      name: 'luyou-transition-custom',
      component: () => import('../components/luyou/CustomTransitionTutorial.vue'),
    },
    // 备份知识点教程（路由专题示例）
    {
      path: '/backup/024-basic-switch',
      name: 'backup-024-basic-switch',
      component: () => import('../views/backup/Backup024BasicSwitch.vue'),
    },
    {
      path: '/backup/025-two-cautions',
      name: 'backup-025-two-cautions',
      component: () => import('../views/backup/Backup025TwoCautions.vue'),
    },
    {
      path: '/backup/026-router-mode',
      name: 'backup-026-router-mode',
      component: () => import('../views/backup/Backup026RouterMode.vue'),
    },
    {
      path: '/backup/027-to-variants',
      name: 'backup-027-to-variants',
      component: () => import('../views/backup/Backup027ToVariants.vue'),
    },
    {
      path: '/backup/028-named-routes',
      name: 'backup-028-named-routes',
      component: () => import('../views/backup/Backup028NamedRoutes.vue'),
    },
    {
      path: '/backup/029-nested-routes',
      name: 'backup-029-nested-routes',
      component: () => import('../views/backup/Backup029NestedRoutes.vue'),
    },
    {
      path: '/backup/030-query',
      name: 'backup-030-query',
      component: () => import('../views/backup/Backup030Query.vue'),
    },
    {
      path: '/backup/031-params',
      name: 'backup-031-params',
      component: () => import('../views/backup/Backup031Params.vue'),
    },
    {
      path: '/backup/032-props',
      name: 'backup-032-props',
      component: () => import('../views/backup/Backup032Props.vue'),
    },
    {
      path: '/backup/033-replace',
      name: 'backup-033-replace',
      component: () => import('../views/backup/Backup033Replace.vue'),
    },
    {
      path: '/backup/034-programmatic',
      name: 'backup-034-programmatic',
      component: () => import('../views/backup/Backup034Programmatic.vue'),
    },
    {
      path: '/backup/035-redirect',
      name: 'backup-035-redirect',
      component: () => import('../views/backup/Backup035Redirect.vue'),
    },
    // 备份示例 App.vue 预览（展示原页面本身）
    {
      path: '/backup-app/024',
      name: 'backup-app-024',
      component: () => import('../views/backup-app/Preview024.vue'),
    },
    {
      path: '/backup-app/025',
      name: 'backup-app-025',
      component: () => import('../views/backup-app/Preview025.vue'),
    },
    {
      path: '/backup-app/026',
      name: 'backup-app-026',
      component: () => import('../views/backup-app/Preview026.vue'),
    },
    {
      path: '/backup-app/027',
      name: 'backup-app-027',
      component: () => import('../views/backup-app/Preview027.vue'),
    },
    {
      path: '/backup-app/028',
      name: 'backup-app-028',
      component: () => import('../views/backup-app/Preview028.vue'),
    },
    {
      path: '/backup-app/029',
      name: 'backup-app-029',
      component: () => import('../views/backup-app/Preview029.vue'),
    },
    {
      path: '/backup-app/030',
      name: 'backup-app-030',
      component: () => import('../views/backup-app/Preview030.vue'),
    },
    {
      path: '/backup-app/031',
      name: 'backup-app-031',
      component: () => import('../views/backup-app/Preview031.vue'),
    },
    {
      path: '/backup-app/032',
      name: 'backup-app-032',
      component: () => import('../views/backup-app/Preview032.vue'),
    },
    {
      path: '/backup-app/033',
      name: 'backup-app-033',
      component: () => import('../views/backup-app/Preview033.vue'),
    },
    {
      path: '/backup-app/034',
      name: 'backup-app-034',
      component: () => import('../views/backup-app/Preview034.vue'),
    },
    {
      path: '/backup-app/035',
      name: 'backup-app-035',
      component: () => import('../views/backup-app/Preview035.vue'),
    },
    {
      path: '/parent-child',
      name: 'parent-child',
      component: () => import('../views/ParentChildDemo.vue'),
    },
    {
      path: '/slot-learn',
      name: 'slot-learn',
      component: () => import('../views/SlotLearnDemo.vue'),
    },
    // 计算属性组件路由
    {
      path: '/jisuan',
      name: 'jisuan',
      component: () => import('../components/jisuan.vue'),
    },
    {
      path: '/jisuan01',
      name: 'jisuan01',
      component: () => import('../components/jisuan01.vue'),
    },
    {
      path: '/jisuan02',
      name: 'jisuan02',
      component: () => import('../components/jisuan02.vue'),
    },
    {
      path: '/jisuan03',
      name: 'jisuan03',
      component: () => import('../components/jisuan03.vue'),
    },
    {
      path: '/jisuan04',
      name: 'jisuan04',
      component: () => import('../components/jisuan04.vue'),
    },
    // 侦听器组件路由
    {
      path: '/zhenting',
      name: 'zhenting',
      component: () => import('../components/zhenting.vue'),
    },
    {
      path: '/zhenting01',
      name: 'zhenting01',
      component: () => import('../components/zhenting01.vue'),
    },
    {
      path: '/zhenting02',
      name: 'zhenting02',
      component: () => import('../components/zhenting02.vue'),
    },
    {
    path: '/zhenting03',
    name: 'zhenting03',
    component: () => import('../components/zhenting03.vue')
  },
  // 样式绑定组件路由
  {
    path: '/yangshi01',
    name: 'yangshi01',
    component: () => import('../components/yangshi/yangshi01.vue')
  },
  {
    path: '/yangshi02',
    name: 'yangshi02',
    component: () => import('../components/yangshi/yangshi02.vue')
  },
  {
    path: '/yangshi03',
    name: 'yangshi03',
    component: () => import('../components/yangshi/yangshi03.vue')
  },
  {
    path: '/guodu01',
    name: 'guodu01',
    component: () => import('../components/guodudonghua/guodu01.vue')
  },
  {
    path: '/guodu02',
    name: 'guodu02',
    component: () => import('../components/guodudonghua/guodu02.vue')
  },
  {
    path: '/guodu03',
    name: 'guodu03',
    component: () => import('../components/guodudonghua/guodu03.vue')
  },
  {
    path: '/guodu04',
    name: 'guodu04',
    component: () => import('../components/guodudonghua/guodu04.vue')
  },
  {
    path: '/guodu05',
    name: 'guodu05',
    component: () => import('../components/guodudonghua/guodu05.vue')
  },
  {
    path: '/guodu',
    name: 'guodu',
    component: () => import('../components/guodudonghua/guodu.vue')
  },
    {
      path: '/profile',
      name: 'profile',
      component: () => import('../views/ProfileView.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/growth-benefits',
      name: 'growth-benefits',
      component: () => import('../views/GrowthBenefitsView.vue'),
      meta: { requiresAuth: true }
    },
      {
      path: '/member-center',
      name: 'member-center',
      component: () => import('../views/MemberCenterView.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/course-center',
      name: 'course-center',
      component: () => import('../views/CourseCenter.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/my-discounts',
      name: 'my-discounts',
      component: () => import('../views/MyDiscounts.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/my-registrations',
      name: 'my-registrations',
      component: () => import('../views/MyRegistrations.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/content-notes',
      name: 'content-notes',
      component: () => import('../views/ContentNotes.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/creator-center',
      name: 'creator-center',
      component: () => import('../views/CreatorCenter.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/write-article',
      name: 'write-article',
      component: () => import('../views/WriteArticle.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/my-footprints',
      name: 'my-footprints',
      component: () => import('../views/MyFootprints.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/user/settings/profile',
      name: 'user-settings-profile',
      component: () => import('../views/settings/ProfileSettings.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/user/settings/account',
      name: 'user-settings-account',
      component: () => import('../views/settings/AccountSettings.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/user/settings/general',
      name: 'user-settings-general',
      component: () => import('../views/settings/GeneralSettings.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/user/settings/notifications',
      name: 'user-settings-notifications',
      component: () => import('../views/settings/NotificationSettings.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/user/settings/block',
      name: 'user-settings-block',
      component: () => import('../views/settings/BlockSettings.vue'),
      meta: { requiresAuth: true }
    },
    {  
      path: '/user/settings/tags',
      name: 'user-settings-tags',
      component: () => import('../views/settings/TagSettings.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/login-test',
      name: 'login-test',
      component: () => import('../views/LoginTestPage.vue')
    },
    {
      path: '/api-test',
      name: 'api-test',
      component: () => import('../views/ApiTest.vue')
    },
    {
      path: '/article/:id',
      name: 'article-detail',
      component: () => import('../views/ArticleDetail.vue'),
      props: true
    },
    {
    path: '/snake-game',
    name: 'snake-game',
    component: () => import('../components/game/SnakeGame.vue')
  },
  {
    path: '/tetris-game',
    name: 'tetris-game',
    component: () => import('../components/game/TetrisGame.vue')
  },
  {
    path: '/breakout-game',
    name: 'breakout-game',
    component: () => import('../components/game/BreakoutGame.vue')
  },
  {
      path: '/space-invaders',
      name: 'space-invaders',
      component: () => import('../components/game/SpaceInvadersGame.vue')
    },
    {
      path: '/plane-war',
      name: 'plane-war',
      component: () => import('../components/game/PlaneWarGame.vue')
    },
    {
    path: '/match-three',
    name: 'match-three',
    component: () => import('../components/game/MatchThreeGame.vue')
  },
  {
    path: '/sokoban',
    name: 'sokoban',
    component: () => import('../components/game/SokobanGame.vue')
  },
  {
    path: '/2048',
    name: 'game-2048',
    component: () => import('../components/game/Game2048.vue')
  },
  {
    path: '/minesweeper',
    name: 'minesweeper',
    component: () => import('../components/game/MinesweeperGame.vue')
  },
  {
    path: '/flappy-bird',
    name: 'flappy-bird',
    component: () => import('../components/game/FlappyBirdGame.vue')
  },
  {
    path: '/pong',
    name: 'pong',
    component: () => import('../components/game/PongGame.vue')
  },
  {
    path: '/connect-four',
    name: 'connect-four',
    component: () => import('../components/game/ConnectFourGame.vue')
  },
  ...adminRoutes
  ,
  {
    path: '/element-plus/counter',
    name: 'element-plus-counter',
    component: () => import('../views/ElementPlusCounter.vue')
  }
  ,
  {
    path: '/pinia/tutorial',
    name: 'pinia-tutorial',
    component: () => import('../views/PiniaTutorial.vue')
  }
]
})

// 路由守卫
router.beforeEach((to, from, next) => {
  const userStore = useUserStore()
  
  // 检查路由是否需要登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 初始化用户状态（从localStorage恢复）
    userStore.initUserState()
    
    // 如果未登录，重定向到首页
    if (!userStore.isLoggedIn) {
      next('/')
      return
    }
    
    // 移除管理员权限检查，允许任何登录用户访问后台管理系统
    // 检查是否访问后台管理系统
    // if (to.path.startsWith('/admin') && userStore.userInfo.user_role !== 'admin') {
    //   // 如果不是管理员，重定向到首页
    //   next('/')
    //   return
    // }
  }
  
  // 后台管理登录页面特殊处理
  if (to.path === '/admin/login' && userStore.isLoggedIn) {
    // 移除管理员角色检查，任何登录用户都重定向到后台首页
    // if (to.path === '/admin/login' && userStore.isLoggedIn && userStore.userInfo.user_role === 'admin') {
    // 如果已经登录，重定向到后台首页
    next('/admin')
    return
  }
  
  next()
})

export default router
